<template>
  <div>
    <!--    <div style="max-height: 60vh; overflow-y: scroll">-->
    <el-form label-position="right" label-width="80px" :model="formData" ref="ruleForm" :rules="rules">
      <el-form-item label="资源名称">
        <div style="width: 95%;">
          <el-input v-model="formData.name" style="width: 100%;" disabled></el-input>
        </div>
      </el-form-item>
      <el-form-item label="目标版本" prop="version">
        <div style="width: 95%;">
          <el-select v-model="formData.version" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in versionList"
              :key="item.id"
              :label="item.deployVersion"
              :value="item.deployVersion">
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item>
        <div style="display: flex; justify-content: right; width: 95%;">
          <el-button type="primary" @click="rollBackYamlDeploy('ruleForm')"
                     class="el-button-primary-style"
          >
            回滚
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <!--    </div>-->
  </div>
</template>

<script>

  export default {
    name: "ServiceInstanceRollbackDialog",
    props: ["serviceInstance"],
    data() {
      return {
        formData: {
          name: '',
          version: '',
        },
        versionList: [],
        rules: {
          version: [
            {required: true, message: '请选择目标版本', trigger: 'change'}
          ],
        }
      }
    },
    methods: {
      getVersionList() {
        this.$appManageApi.rollBackYamlDeploy(this.serviceInstance.id).then(res => {
          if (res && res.code === 200) {
            this.versionList = res.data;
          }
        })
      },
      rollBackYamlDeploy(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const param = {id: this.serviceInstance.id, version: this.formData.version};
            this.$appManageApi.rollBackYamlDeployByVersion(param).then(res => {
              if (res && res.code === 200) {
                this.$message.success(res.msg);
                this.$emit("closeRollbackDialog");
              }
            })
          } else {
            this.$message.error("请选择目标版本");
            return false;
          }
        });
      }
    },
    beforeMount() {
      this.formData.name = this.serviceInstance.appName;
      this.getVersionList();
    },
  }
</script>

<style scoped>
</style>
